<template>
  <div class="app-container" style="height: 100%">
    <div class="app-container-inner" style="display: flex; flex-direction: column; flex: 1">
      <div class="main">
        <el-tabs
          v-model="propName"
          class="demo-tabs"
          @tab-click="(tab) => switchTabs(tab.props.name)"
        >
          <el-tab-pane label="编码设置" name="first">
            <h4 class="title_h4">登记设置</h4>
            <ActiveCard />
            <h4 class="title_h4">编码表字段</h4>
            <RegisCard ref="regCard" />
            <h4 class="title_h4">编码自定义字段</h4>
            <RegisField ref="regField" />
          </el-tab-pane>
          <el-tab-pane label="编码策略" name="second">
            <StraCard ref="straCard" />
          </el-tab-pane>

          <!-- <el-tab-pane label="登记设置" name="third">
          </el-tab-pane> -->
          <!-- <el-tab-pane label="编码表字段" name="field1">
          </el-tab-pane> -->
          <!-- <el-tab-pane label="字段设置" name="field2">
          </el-tab-pane> -->
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import StraCard from '../components/StraCard/index.vue'
  import ActiveCard from '../components/ActiveCard/index.vue'
  import RegisCard from '../components/RegisCard/index.vue'
  import RegisField from '../components/RegisField/index.vue'
  import { ref, watch } from 'vue'
  import { useRoute } from 'vue-router'
  import pageComponentName from '@/config/page-component-name'

  defineOptions({
    name: pageComponentName.setting.snCodeSet,
  })

  const route = useRoute()
  const propName = ref(route.query.active == undefined ? 'first' : route.query.active)
  const straCard = ref()
  const regCard = ref()
  const regField = ref()

  // 导航切换时
  const switchTabs = async (tab) => {
    propName.value = tab
    if (tab == 'first') {
      await regCard.value.getSet()
      await regField.value.getList()
    }
    if (tab == 'second') {
      await straCard.value.getSet()
    }
  }
  watch(
    () => route.path,
    () => {
      if (route.query.active) {
        switchTabs(route.query.active)
      }
    },
  )
</script>

<style scoped lang="scss">
  @import './index';
</style>
